<div class="header flex ">
    <img src="assets/images/black_left.svg" alt="" class="header_img">
    <div class="header_cut"></div>
    <div class="header_title">这里是设备名称</div>
    <div class="header_button" (click)="showdevice_configModal()">设备配置</div>
</div>
<div class="background flex flex_column flex_1">
    <!--上部选项卡-->
    <div class="bg_white flex module">
        <nz-tabset>
            <nz-tab nzTitle="基本信息" (nzClick)="qieHuan1()">

            </nz-tab>
            <nz-tab nzTitle="应用详情" (nzClick)="qieHuan2()">
                永远永远
            </nz-tab>
        </nz-tabset>
    </div>
    <!--基本信息-->
    <div *ngIf="state === 1">
        <div class="bg_white flex device_module " style="padding: 20px;">
            <div class="device_info_left">
                <div class="device_info_module" style="margin-top: 20px;">
                    <div class="device_info_name">设备名称</div>
                    <div class="device_info_data">设备名称1</div>
                </div>
                <div class="device_info_module">
                    <div class="device_info_name">固件名称</div>
                    <div class="device_info_data">HiLens_Device_x86_Agent</div>
                </div>
                <div class="device_info_module">
                    <div class="device_info_name">固件版本</div>
                    <div class="device_info_data">1.2.0</div>
                </div>
                <div class="device_info_module">
                    <div class="device_info_name">设备IP</div>
                    <div class="device_info_data">192.168.137.7</div>
                </div>
                <div class="device_info_module">
                    <div class="device_info_name">端口号</div>
                    <div class="device_info_data">8080</div>
                </div>
            </div>
            <div class="device_info_right">
                <div class="device_info_module" style="margin-top: 20px;">
                    <div class="device_info_name">设备类型</div>
                    <div class="device_info_data">Atlas 800</div>
                </div>
                <div class="device_info_module">
                    <div class="device_info_name">OS</div>
                    <div class="device_info_data">Euler</div>
                </div>
                <div class="device_info_module">
                    <div class="device_info_name">OS版本号</div>
                    <div class="device_info_data">Linux version 4.19.36</div>
                </div>
                <div class="device_info_module">
                    <div class="device_info_name">HTTPS证书</div>
                    <div class="device_info_data">/home/hilens/hda/etc/crt/server.crt</div>
                </div>
                <div class="device_info_module">
                    <div class="device_info_name">KEY证书</div>
                    <div class="device_info_data">/home/hilens/hda/etc/crt/server.crt</div>
                </div>
            </div>

        </div>
        <!--资源监控-->
        <div class="bg_white flex resourse_module " style="padding-bottom: 10px;">
            <div class="res_title">资源监控</div>
            <div class="res_time res_time_choose" style="margin-left:auto;">近1小时</div>
            <div class="res_time">近3小时</div>
            <div class="res_time">近12小时</div>
        </div>

        <div class="bg_white resourse_module_body ">
            <!--统计类型-->
            <div class="res_body_name">
                统计类型
            </div>

            <nz-select ngModel="avg" style="width: 180px;height: 28px;">
                <nz-option nzValue="avg" nzLabel="平均值"></nz-option>
                <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
                <nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>
            </nz-select>

            <div class="res_body">
                <div class="res_table">
                </div>
                <div class="res_table">
                </div>
                <div class="res_table" style="margin-right: 0px;">
                </div>
                <div class="res_table" style="margin-bottom: 20px;">
                </div>
                <nz-divider nzDashed></nz-divider>
            </div>

            <!--应用-->
            <div class="res_body_name">
                应用
            </div>
            <nz-select ngModel="jack" style="width: 180px;height: 28px;">
                <nz-option nzValue="jack" nzLabel="应用1"></nz-option>
                <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
                <nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>
            </nz-select>

            <div class="res_body_name" style="margin-left:80px">
                实例
            </div>
            <nz-select ngModel="jack" style="width: 180px;height: 28px;">
                <nz-option nzValue="jack" nzLabel="实例1"></nz-option>
                <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
                <nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>
            </nz-select>

            <div class="res_body">
                <div class="res_table">
                </div>
                <div class="res_table">
                </div>
                <div class="res_table" style="margin-right: 0px;">
                </div>
            </div>
        </div>
    </div>
    <!--应用详情-->
    <div *ngIf="state ===2">
        <div class="bg_white device_module " style="padding: 20px;padding-left: 40px;">
            <div class="refresh_div" style="margin-left: 13px;">
                <img src="assets/images/share.png" class="refresh_img_share" (click)="showLogDownloadModal()" />
            </div>
            <div class="refresh_div">
                <img src="assets/images/icon_refresh.png" class="refresh_img" />
            </div>
            <nz-input-group [nzSuffix]="suffixIconSearch" class="searchinput">
                <input type="text" nz-input placeholder="Search" />
            </nz-input-group>
            <ng-template #suffixIconSearch>
                <i nz-icon nzType="search"></i>
            </ng-template>

            <nz-table #nestedTable [nzData]="listOfParentData" [nzPageSize]="10">
                <thead>
                    <tr>
                        <th nzWidth="2%"></th>
                        <th nzWidth="2%"></th>
                        <th nzWidth="23%">AI应用名称</th>
                        <th nzWidth="15%">状态</th>
                        <th nzWidth="15%">实例功能</th>
                        <th nzWidth="20%">到期时间</th>
                        <th nzWidth="23%">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <ng-template ngFor let-data [ngForOf]="nestedTable.data">
                        <tr class="parent_tr">
                            <td [nzChecked]="setOfCheckedId.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
                            <td [(nzExpand)]="data.expand"></td>
                            <td>{{ data.apply_name }}</td>
                            <td>
                                <div class="small_circle"></div>{{ data.state }}</td>
                            <td>{{ data.function }}</td>
                            <td>{{ data.endtime }}</td>
                            <td>
                                <a class="child_a" style="margin-left: 0px;" (click)="showruntimeConfigModal()">运行时配置</a>
                                <a class="child_a">启动</a>
                                <a class="child_a">停止</a>
                                <a class="child_a" (click)="showUpdateModal()">更新</a>
                            </td>
                        </tr>
                        <tr [nzExpand]="data.expand" style="background-color: white;height: 100%;">

                            <nz-table #innerTable [nzData]="listOfChildrenData" nzSize="middle" [nzShowPagination]="false" class="childtable">
                                <thead>
                                    <tr>
                                        <th nzWidth="1%"></th>
                                        <th>实例名称</th>
                                        <th>状态</th>
                                        <th style="text-overflow: ellipsis;
                                        white-space: nowrap;
                                        overflow: hidden;">启动指令</th>
                                        <th>说明</th>
                                        <th>当前调用次数</th>
                                        <th>成功率</th>
                                        <th>当前QPS</th>
                                        <th>平均时延</th>
                                        <th>CPU占用率</th>
                                        <th>内存占用率</th>
                                        <th>NPU/GPU占用率</th>
                                        <th>磁盘占用率</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let data of innerTable.data" class="child_tr">
                                        <td></td>
                                        <td>{{ data.name }}</td>
                                        <td>
                                            <span *ngIf="data.state === '可用'" class="small_circle" style="background:#5DD4AF;"></span>
                                            <span *ngIf="data.state === '异常'" class="small_circle" style="background:#F66F6A;"></span>
                                            <span *ngIf="data.state === '停用'" class="small_circle" style="background: #999999;"></span> {{ data.state }}

                                        </td>
                                        <td>{{ data.start_command }}</td>
                                        <td>{{ data.explain }}</td>
                                        <td>{{ data.times }}</td>
                                        <td>{{ data.success_rate }}</td>
                                        <td>{{ data.QPS }}</td>
                                        <td>{{ data.delay }}</td>
                                        <td>{{ data.CPU }}</td>
                                        <td>{{ data.Memory }}</td>
                                        <td>{{ data.NPUGPU }}</td>
                                        <td>{{ data.disk }}</td>
                                        <td>
                                            <a class="child_a" style="margin-left: 0px;" (click)="showEditModal()">编辑</a>
                                            <a class="child_a">启动</a>
                                            <a class="child_a">停止</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </nz-table>
                        </tr>
                    </ng-template>
                </tbody>
            </nz-table>
        </div>
    </div>
</div>
<!-- 设备配置 -->
<nz-modal [(nzVisible)]="device_configIsVisable" nzCentered [nzFooter]=null [nzWidth]="600">
    <ng-container *nzModalContent>
        <div class="device_config_modal">
            <div class="device_config_title">设备配置</div>
            <div class="device_config_data">
                <div class="device_config_data_text">
                    设备IP
                </div>
                <div class="device_config_data_input">
                    <input nz-input placeholder="" [(ngModel)]="ipInput1" class="device_config_ip_input" />
                    <div class="device_config_point_div">
                        <div class="device_config_point"></div>
                    </div>
                    <input nz-input placeholder="" [(ngModel)]="ipInput2" class="device_config_ip_input" />
                    <div class="device_config_point_div">
                        <div class="device_config_point"></div>
                    </div>
                    <input nz-input placeholder="" [(ngModel)]="ipInput3" class="device_config_ip_input" />
                    <div class="device_config_point_div">
                        <div class="device_config_point"></div>
                    </div>
                    <input nz-input placeholder="" [(ngModel)]="ipInput4" class="device_config_ip_input" />
                </div>
            </div>
            <div class="device_config_data">
                <div class="device_config_data_text">
                    端口号
                </div>
                <div class="device_config_data_input">
                    <input nz-input placeholder="Basic usage" [(ngModel)]="portInput" class="device_config_port_input" />
                </div>
            </div>
            <div class="device_config_data">
                <div class="device_config_data_text">
                    HTTPS证书
                </div>
                <div class="device_config_data_input">
                    <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" [nzHeaders]="{ authorization: 'authorization-text' }" style="flex: 1;">
                        <nz-input-group [nzSuffix]="suffixIconSearch">

                            <input type="text" nz-input placeholder="请选择文件" class="device_config_long_input" />
                        </nz-input-group>
                        <ng-template #suffixIconSearch>
                            <img src="assets/images/folder.svg" alt="" class="device_config_input_img">
                        </ng-template>



                    </nz-upload>

                </div>
                <div class="upload_file">上传文件</div>
            </div>
            <div class="device_config_data">
                <div class="device_config_data_text">
                    KEY证书
                </div>
                <div class="device_config_data_input">
                    <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" [nzHeaders]="{ authorization: 'authorization-text' }" style="flex: 1;">
                        <nz-input-group [nzSuffix]="suffixIconSearchk">

                            <input type="text" nz-input placeholder="请选择文件" class="device_config_long_input" />
                        </nz-input-group>
                        <ng-template #suffixIconSearchk>
                            <img src="assets/images/folder.svg" alt="" class="device_config_input_img">
                        </ng-template>



                    </nz-upload>

                </div>
                <div class="upload_file">上传文件</div>
            </div>
            <div class="device_config_button">
                <div class="device_config_ok" (click)="device_configOk()">确定</div>
                <div class="device_config_cancel" (click)="device_configCancel()">取消</div>
            </div>
        </div>

    </ng-container>
</nz-modal>
<!-- 日志下载 -->
<nz-modal [(nzVisible)]="logDownloadIsVisable" nzCentered [nzFooter]=null [nzWidth]="450">
    <ng-container *nzModalContent>
        <div class="log_modal">
            <div class="log_title">
                <div class="green_check">
                    <img src="assets/images/white_check.svg" alt="" class="check_img">
                </div>
                <div class="title_text">
                    日志下载已提交
                </div>
            </div>
            <div class="log_data">
                日志将在收集完成后，保存在浏览器默认下载目录。
            </div>

            <div class="log_button">
                <div class="log_ok" (click)="logOk()">确定</div>
                <div class="log_cancel" (click)="logCancel()">取消</div>
            </div>
        </div>

    </ng-container>
</nz-modal>
<!-- 应用详情 -->
<nz-modal [(nzVisible)]="editIsVisable" nzCentered [nzFooter]=null [nzWidth]="600">
    <ng-container *nzModalContent>
        <div class="edit_modal">
            <div class="edit_title">编辑</div>

            <div class="edit_data">
                <div class="star">*</div>
                <div class="edit_data_text">
                    实例名
                </div>
                <input nz-input placeholder="请输入实例名" [(ngModel)]="exampleName" class="edit_example_input" />

            </div>
            <div class="edit_data">
                <div class="edit_data_text" style="margin-left: 14px;">
                    启动指令
                </div>
                <div class="edit_textarea_div">
                    <textarea nz-input [(ngModel)]="startCommand" placeholder="请输入启动指令" class="edit_textarea"></textarea>
                    <div class="text_area_column">0/1000</div>
                </div>
            </div>
            <div class="edit_button">
                <div class="edit_ok" (click)="editOk()">确定</div>
                <div class="edit_cancel" (click)="editCancel()">取消</div>
            </div>
        </div>

    </ng-container>
</nz-modal>
<!-- 运行时配置 -->
<nz-modal [(nzVisible)]="runtimeConfigIsVisable" nzCentered [nzFooter]=null [nzWidth]="800">
    <ng-container *nzModalContent>
        <div class="run_config_modal">
            <div class="run_config_title">运行时配置</div>
            <div class="run_config_data">
                <nz-table #basicTable [nzData]="runtimeConfigDate" class="run_config_table" [nzSize]="'small'" [nzHideOnSinglePage]="true">
                    <thead>
                        <tr class="config_table_tr">
                            <th nzWidth="26%" style="padding-left: 30px;">参数名称</th>
                            <th nzWidth="14%">值类型</th>
                            <th nzWidth="14%">值约束</th>
                            <th nzWidth="16%">配置对象</th>
                            <th nzWidth="30%">值</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let data of basicTable.data" class="tbody_font">
                            <td style="padding-left: 30px;">{{ data.paramName }}</td>
                            <td>{{ data.type }}</td>
                            <td>{{ data.limit }}</td>
                            <td>{{ data.configObject }}</td>
                            <td>
                                <input nz-input placeholder="请输入值" [(ngModel)]="runConfigInput" class="run_config_input" />
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
            <div class="run_config_button">
                <div class="run_config_ok" (click)="runtimeConfigOk()">确定</div>
                <div class="run_config_cancel" (click)="runtimeConfigCancel()">取消</div>
            </div>
        </div>

    </ng-container>
</nz-modal>
<!-- 更新 -->
<nz-modal [(nzVisible)]="updateIsVisable" nzCentered [nzFooter]=null [nzWidth]="600">
    <ng-container *nzModalContent>
        <div class="update_modal" *ngIf="updateStepOne">
            <div class="update_title">更新</div>
            <div class="update_data">
                <div class="update_data_text">更新内容</div>
                <div class="update_data_radio">
                    <nz-radio-group [(ngModel)]="radioValue" class="update_radio">
                        <label nz-radio nzValue="A">应用版本更新</label>
                        <label nz-radio nzValue="B">License续费</label>
                    </nz-radio-group>
                </div>
            </div>
            <div class="update_data">
                <div class="update_data_text">
                    设备名称
                </div>
                <div class="update_data_input">
                    <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" [nzHeaders]="{ authorization: 'authorization-text' }" style="flex: 1;">
                        <nz-input-group [nzSuffix]="suffixIconSearch">

                            <input type="text" nz-input placeholder="请选择文件" class="update_long_input" />
                        </nz-input-group>
                        <ng-template #suffixIconSearch>
                            <img src="assets/images/folder.svg" alt="" class="update_input_img">
                        </ng-template>



                    </nz-upload>

                </div>
                <div class="upload_file">上传文件</div>
            </div>
            <div class="update_button">
                <div class="update_next" (click)="updateNext()">下一步</div>
                <div class="update_cancel" (click)="updateCancel()">取消</div>
            </div>
        </div>
        <div class="update_modal" *ngIf="updateStepTwo">
            <div class="update_title">更新</div>
            <nz-table #rowSelectionTable [nzData]="updateModalData">
                <thead>
                    <tr class="update_thead_font">
                        <th [nzShowCheckbox]="true" [nzChecked]="checked"></th>
                        <th>AI应用名称</th>
                        <th>当前版本号</th>
                        <th>更新后版本号</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of rowSelectionTable.data" class="update_tbody_font">
                        <td [nzShowCheckbox]="true"></td>
                        <td>{{ data.aiAppName }}</td>
                        <td>{{ data.currentVersion }}</td>
                        <td>{{ data.updatedVersion }}</td>
                    </tr>
                </tbody>
            </nz-table>
            <div class="update_button">
                <div class="update_back" (click)="updateBack()">上一步</div>
                <div class="update_ok" (click)="updateOk()">更新</div>
                <div class="update_cancel" (click)="updateCancel()">取消</div>
            </div>
        </div>
    </ng-container>
</nz-modal>